<template>
  <div class="icon-template" @click.prevent="handleClick">
    <el-tooltip placement="top">
      <template #content>
        {{ tip }}
      </template>
      <el-button :type="modelValue ? 'primary' : 'default'" circle>
        <template #icon>
          <img :src="currentIcon" class="icon" />
        </template>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import boldNormal from '@/assets/icon_bold_normal.png'
import boldSelected from '@/assets/icon_bold_selected.png'
import italicNormal from '@/assets/icon_italic_normal.png'
import italicSelected from '@/assets/icon_italic_selected.png'
import underlineNormal from '@/assets/icon_underline_normal.png'
import underlineSelected from '@/assets/icon_underline_selected.png'
// 515151

//bold italic underline
const props = withDefaults(defineProps<{ modelValue: boolean; tip: string; iconName: string }>(), {
  modelValue: false
})
const emit = defineEmits(['change', 'update:modelValue'])
const currentIcon = computed(() => {
  if (props.iconName === 'bold') {
    return props.modelValue ? boldSelected : boldNormal
  } else if (props.iconName === 'italic') {
    return props.modelValue ? italicSelected : italicNormal
  } else if (props.iconName === 'underline') {
    return props.modelValue ? underlineSelected : underlineNormal
  }
})

const handleClick = () => {
  emit('change', !props.modelValue)
  // emit('update:modelValue', !props.modelValue)
}
</script>
<style lang="scss" scoped>
.icon {
  width: 20px;
  height: 20px;
}
</style>
